<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>查看更多</title>
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">  
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">    
    <style>
        .option{
            list-style: none;
            padding-left: 0;
            border: 1px solid #ccc;
            display: none; 
        }
        .option-item{
            padding: 5px 0;
        }
        .option-item:hover{
            background: #efefef;
        }
        .unit:focus+.option{
            display: block; 
        }
        .option:active{  /* 鼠标按下还未释放是触发，用来解决输入框无法获取选中的值 */
            display: block;
        }
        .form-control[readonly]{
            background: transparent;
        }
        .add-item{
            border-top: 1px solid #ccc;
            padding: 6px;
            cursor: pointer;
        }
        
    </style> 
</head>
<body>
    <div class="row">
        <div class="col-sm-2 col-sm-offset-4">
            <input type="text" class="form-control unit" readonly>
            <ul class="option text-center">
               <li class="option-item">1</li>
               <li class="option-item">2</li>
               <li class="option-item">3</li>
               <div class="add-item">
                   <i class="fa fa-plus"></i> 新增单位
               </div>
            </ul>
        </div>
    </div>
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
    $('.option').on('click', '.option-item', function(){
        $('.unit').val($(this).text())
    })
</script>